<template>
    <div>
        <div v-for="appGroup in groupedData" :key="appGroup.app">
            <a-card
                :title="`应用：${appGroup.app}`"
                style="margin-bottom: 32px;"
                :body-style="{padding: '16px'}"
            >
                <div v-for="group in appGroup.versions" :key="group.version" style="margin-bottom: 24px;">
                    <div style="font-weight: bold; font-size: 16px; margin: 12px 0; display: flex; align-items: center;">
                        <span>版本分组：{{ group.version }}</span>
                        <span style="margin-left: 16px; color: #888;">进度：{{ group.installed }}/{{ group.total }} ({{ group.percent }}%)</span>
                        <a-button v-if="group.percent < 100" type="primary" size="small" style="margin-left: 16px;">安装</a-button>
                    </div>
                    <a-table
                        :columns="columns"
                        :dataSource="group.children"
                        :pagination="false"
                        rowKey="version"
                        size="small"
                    >
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex === 'is_install'">
                                <a-tag :color="record.is_install ? 'success' : 'default'">
                                    {{ record.is_install ? '已安装' : '未安装' }}
                                </a-tag>
                            </template>
                            <template v-if="column.dataIndex === 'action'">
                                <a-space>
                                    <a-button type="primary" v-if="!record.is_install" size="small" @click="handleInstall(record)">安装</a-button>
                                    <a-popconfirm title="确定要卸载吗？" v-else-if="record.app !== 'adminapi'" @confirm="handleUninstall(record)">
                                        <a-button type="primary" danger size="small">卸载</a-button>
                                    </a-popconfirm>
                                    
                                    <a-tag v-else color="blue">
                                        系统禁止卸载
                                    </a-tag>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import request from '@/utils/request'
import { ref, onMounted } from 'vue'

const columns = [
    { title: '版本', dataIndex: 'version' , width: 200},
    { title: '迁移名称', dataIndex: 'migration_name' , width: 200},
    { title: '所属应用', dataIndex: 'app' , width: 200},
    { title: '是否安装', dataIndex: 'is_install' , width: 80 ,align: 'center'},
    { title: '安装时间', dataIndex: 'start_time' , width: 240},
    { title: '结束时间', dataIndex: 'end_time' , width: 240},
    { title: '操作', dataIndex: 'action' , width: 100, align: 'center'}
]

const groupedData = ref<any[]>([])

onMounted(async () => {
    const res = await request.get({ url: '/adminapi/system.setting.database/migrations' })
    // 先按 app 分组
    const appGroups: Record<string, any[]> = {}
    res.lists.forEach((item: any) => {
        const appKey = item.app || '未知应用'
        if (!appGroups[appKey]) appGroups[appKey] = []
        appGroups[appKey].push(item)
    })
    groupedData.value = Object.entries(appGroups).map(([app, items]) => {
        // 应用组内再按版本分组
        const versionGroups: Record<string, any[]> = {}
        items.forEach((item: any) => {
            const groupKey = item.version ? item.version.slice(0, -3) : '未知'
            if (!versionGroups[groupKey]) versionGroups[groupKey] = []
            versionGroups[groupKey].push(item)
        })
        const versions = Object.entries(versionGroups).map(([version, children]) => {
            const total = children.length
            const installed = children.filter((item: any) => item.is_install).length
            const percent = total > 0 ? Math.round(installed / total * 100) : 0
            return {
                version,
                children,
                total,
                installed,
                percent
            }
        })
        return {
            app,
            versions
        }
    })
})
</script>